<template>
  <view>
    <view class="drop">
      <uv-drop-down
        ref="dropDown"
        sign="dropDown_1"
        text-size="30rpx"
        text-active-size="30rpx"
        text-active-color="#333333"
        text-color="#333333"
        @click="selectMenu"
        :defaultValue="defaultValue"
        :extra-icon="{ name: 'arrow-down', color: '#333333', size: '30rpx' }"
        :extra-active-icon="{
          name: 'arrow-up',
          color: '#333333',
          size: '30rpx',
        }"
      >
        <!-- <uv-drop-down-item
          name="order"
          type="2"
          :label="dropItem('order').label"
          :value="dropItem('order').value"
        >
        </uv-drop-down-item> -->
        <uv-drop-down-item
          name="customerLevel"
          type="2"
          :label="dropItem('customerLevel').label"
          :value="dropItem('customerLevel').value"
        >
        </uv-drop-down-item>
        <!-- <uv-drop-down-item
          name="allocationWay"
          type="2"
          :label="dropItem('allocationWay').label"
          :value="dropItem('allocationWay').value"
        >
        </uv-drop-down-item> -->
      </uv-drop-down>
      <uv-drop-down-popup
        sign="dropDown_1"
        @popupChange="change"
        :currentDropItem="currentDropItem"
        @clickItem="clickMenuItem"
      >
        <!-- <view
            style="width: 670rpx; height: 300rpx; background-color: #fff"
          ></view> -->
      </uv-drop-down-popup>
    </view>
    <view class="pageLayout">
      <view class="tabs">
        <capsuleButton
          @change="resetSearch()"
          :list="tabsList"
          value-key="val"
          btn-title-name-key="name"
          v-model="time"
        ></capsuleButton>
      </view>
      <view
        class="cus_car"
        v-for="item in dataList"
        :key="item.customerID"
        @click="clickItem(item)"
      >
        <view class="top">
          <text class="detail">查看详情</text>
          <u-icon name="arrow-right" color="#1C1B2680" size="10"></u-icon>
        </view>
        <view class="cus_box">
          {{ item.customerName }}-{{
            item.customerPhoneNumber ? item.customerPhoneNumber + "/" : ""
          }}{{ item.appNumber ? item.appNumber : "" }}
        </view>
        <view class="tag_box">
          <text class="follow_tag" v-if="item.customerResourceState">{{
            statusMap.get(item.customerResourceState)
          }}</text>
          <view
            class="tips s"
            v-if="item.customerServiceCustomerSourceLevel === 'S'"
            >S级</view
          >
          <view
            class="tips a"
            v-else-if="item.customerServiceCustomerSourceLevel === 'A'"
            >A级</view
          >
          <view
            class="tips b"
            v-else-if="item.customerServiceCustomerSourceLevel === 'B'"
            >B级</view
          >
          <view
            class="tips c"
            v-else-if="item.customerServiceCustomerSourceLevel === 'C'"
            >C级</view
          >
          <view
            class="tips d"
            v-else-if="item.customerServiceCustomerSourceLevel === 'D'"
            >D级</view
          >
        </view>
        <view class="tag_box" style="margin-top: 10rpx">
          <view class="tips hasLink" v-if="item.hasLink">已拍</view>
          <view class="tips hasLink" v-if="item.linkType === 'FiveThousand'"
            >5000链接</view
          >
          <view class="tips hasLink" v-if="item.linkType === 'OneThousand'"
            >1000链接</view
          >
          <view
            class="tips hasLink"
            v-if="item.serviceType === 'OnLineShipping'"
            >线上代买</view
          >
          <view
            class="tips hasLink"
            v-if="item.serviceType === 'OfflineViewing'"
            >线下带看</view
          >
          <view
            class="tips red_tag"
            v-for="(tag, index) in item.listThreeLevelTag"
            :key="index"
            >{{ tag.tag }}</view
          >
        </view>

        <view class="time">
          <u-icon name="clock-fill" size="12" color="#8d8d92"></u-icon>
          <view class="time_detail">{{
            formatTimestamp(item.allocationTime, "onlyDate")
          }}</view>
        </view>
        <view class="server_box">
          <u-icon name="account-fill" size="12" color="#8d8d92"></u-icon>
          <view class="server_name">客服：{{ item.customerServiceName }}</view>
          <view v-if="item.customerServiceGroupLeaderName">|</view>
          <view v-if="item.customerServiceGroupLeaderName" class="server_gropup"
            >组长：{{ item.customerServiceGroupLeaderName }}</view
          >
        </view>
      </view>
      <view v-if="!dataList.length" class="noData">
        <u-empty mode="list"> </u-empty>
      </view>
    </view>
  </view>
</template>
    
    <script>
//   import store from "../../store/index";
import {
  queryCustomerLinkManagerPage,
  queryCustomerResourceFollowPageList,
} from "@/api/customer/index";
import capsuleButton from "@/components/capsuleButton.vue";
import {
  getMonthList,
  getWeekList,
  getTodayStartTimestamp,
} from "@/utils/time";
export default {
  components: {
    capsuleButton,
  },
  onPageScroll() {
    // 滚动后及时更新位置
    this.$refs.dropDown.init();
  },
  computed: {
    dropItem(name) {
      return (name) => {
        const result = {};
        const find = this.result.find((item) => item.name === name);
        if (find) {
          result.label = find.label;
          result.value = find.value;
        } else {
          result.label = this[name].label;
          result.value = this[name].value;
        }
        return result;
      };
    },
    // 获取当前下拉筛选项
    currentDropItem() {
      return this[this.activeName];
    },
  },
  data() {
    return {
      id: "",
      type: "",
      dataList: [],
      tabsList: [
        {
          name: "本日",
          val: "ToDay",
        },
        {
          name: "本周",
          val: "week",
        },
        {
          name: "本月",
          val: "mounth",
        },
        {
          name: "全部",
          val: "all",
        },
      ],
      listForm: {
        pageIndex: 1, // 当前页码
        pageSize: 10, // 每页数量
        customerLevel: "All", // 客户级别
        allocationWay: null, // 分配方式
      },
      time: "ToDay",
      hasMore: true, // 是否还有更多数据
      loading: false, // 加载状态
      defaultValue: ["All", 4],
      statusMap: new Map([
        ["Created", "未分配"],
        ["Assigned", "已分配"],
        ["FollowUp", "跟进中"],
        ["HighSeas", "公海"],
        ["ToLinkToBeConfirm", "待审批"],
        ["InvitationManager", "已拍链接"],
        ["Transacted", "已成交"],
        ["LeaderRefunding", "退款审核中"],
        ["FinanceRefunding", "退款审核中"],
        ["Transacted", "已成交"],
        ["LinkRefund", "已退款"],
      ]),
      customerLevel: {
        label: "SA分级",
        value: "All",
        activeIndex: 0,
        color: "#333",
        activeColor: "#a22d27",
        size: "30rpx",
        activeSize: "30rpx",
        child: [
          {
            label: "全部",
            value: "All",
          },
          {
            label: "SA",
            value: "SA",
          },
        ],
      },
      // allocationWay: {
      //   label: "分配方式",
      //   value: 4,
      //   color: "#333",
      //   activeColor: "#a22d27",
      //   size: "30rpx",
      //   activeSize: "30rpx",
      //   child: [
      //     {
      //       label: "客服分配",
      //       value: 1,
      //     },
      //     {
      //       label: "系统分配",
      //       value: 2,
      //     },
      //     {
      //       label: "客资池",
      //       value: 4,
      //     },
      //     {
      //       label: "更换搭配师",
      //       value: 8,
      //     },
      //   ],
      // },
      activeName: "type",
      result: [],
    };
  },
  onLoad(options) {
    console.log(options.type, "options");
    // 1锁单 2跟单 4奖励客资
    if (options && options.type) {
      this.type = options.type;
      if (this.type == 4) {
        uni.setNavigationBarTitle({
          title: "奖励客资",
        });
        this.listForm.allocationWay = Number(options.type);
      } else if (this.type == 2) {
        uni.setNavigationBarTitle({
          title: "跟单",
        });
        this.time='all'
      }
    }
  },
  onShow() {
    console.log(8848);
    this.getList();
  },
  methods: {
    /**
     * 点击菜单回调处理
     * @param {Object} item 选中项 { label,value } = e
     */
    clickMenuItem(e) {
      let { label, value } = e;
      const findIndex = this.result.findIndex(
        (item) => item.name == this.activeName
      );
      if (
        this.defaultValue.indexOf(value) > -1 &&
        this[this.activeName].label
      ) {
        label = this[this.activeName].label;
      }
      // 已经存在筛选项
      if (findIndex > -1) {
        this.$set(this.result, findIndex, {
          name: this.activeName,
          label,
          value,
        });
      } else {
        this.result.push({
          name: this.activeName,
          label,
          value,
        });
      }
      this.result = this.result.filter(
        (item) => this.defaultValue.indexOf(item.value) == -1
      );
      console.log(this.result, "this.result");
      this.resetSearch();
    },
    change(e) {
      console.log("弹窗打开状态：", e);
    },
    /**
     * 点击每个筛选项回调
     * @param {Object} e { name, active, type } = e
     */
    selectMenu(e) {
      const { name, active, type } = e;
      this.activeName = name;
      // type 等于1 的需要特殊处理：type不等于1可以忽略

      const find = this.result.find((item) => item.name == this.activeName);
      if (find) {
        const findIndex = this[this.activeName].child.findIndex(
          (item) => item.label == find.label && item.value == find.value
        );
        this[this.activeName].activeIndex = findIndex;
      } else {
        this[this.activeName].activeIndex = 0;
      }
    },
    /**
     * 点击列表跳转详情页
     */
    clickItem(item) {
      // console.log(item,'item');
      uni.navigateTo({
        url: `/pages/customer/detail?id=${item.customerResourceID}`,
      });
    },
    /**
     * 重置搜索
     */
    resetSearch() {
      this.listForm.pageIndex = 1;
      this.dataList = [];
      this.hasMore = true;
      this.getList();
    },
    /**
     * 获取列表
     */
    getList() {
      if (!this.hasMore || this.loading) return;
      let listSearchTime = null;
      if (this.time === "ToDay") {
        listSearchTime = getTodayStartTimestamp();
      } else if (this.time === "week") {
        listSearchTime = getWeekList();
      } else if (this.time === "mounth") {
        listSearchTime = getMonthList();
      } else {
        listSearchTime = null;
      }
      this.loading = true;
      let data = {
        classeseRecordID: this.id,
        pageIndex: this.listForm.pageIndex,
        pageSize: this.listForm.pageSize,
        allocationWay: this.listForm.allocationWay,
        listSearchTime,
        // customerLevel: this.listForm.customerLevel,
      };
      this.result.map((item) => {
        data[item.name] = item.value;
      });
      console.log(data, "data");
      if (this.type == 1 || this.type == 4) {
        queryCustomerLinkManagerPage(data)
          .then((res) => {
            console.log(res, "res");

            // 假设接口返回格式为 { list: [], total: 0 }
            if (res.data.items && res.data.items.length > 0) {
              this.dataList = [...this.dataList, ...res.data.items];

              // 计算是否还有更多数据
              this.hasMore = this.dataList.length < res.data.totalCount;
            } else {
              this.hasMore = false;
            }

            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      } else if (this.type == 2) {
        console.log("跟单");
        queryCustomerResourceFollowPageList(data)
          .then((res) => {
            console.log(res, "res");

            // 假设接口返回格式为 { list: [], total: 0 }
            if (res.data.items && res.data.items.length > 0) {
              this.dataList = [...this.dataList, ...res.data.items];

              // 计算是否还有更多数据
              this.hasMore = this.dataList.length < res.data.totalCount;
            } else {
              this.hasMore = false;
            }

            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }
    },
  },
  /**
   * 上拉加载更多
   */
  onReachBottom() {
    console.log("上拉加载更多");

    if (this.hasMore) {
      this.listForm.pageIndex++;
      this.getList();
    }
  },
};
</script>
    <style>
page {
  background-color: #f5f7fb;
}
</style>
    <style lang="scss" scoped>
.pageLayout {
  padding: 40rpx;
}
.custom-option {
  display: flex;
  align-items: center;
}
.cus_car {
  background-color: #ffffff;
  width: 670rpx;
  // height: 207rpx;
  padding: 40rpx;
  box-sizing: border-box;
  padding-top: 13rpx;
  margin-bottom: 24rpx;
  .top {
    display: flex;
    color: #1c1b2680;
    font-size: 20rpx;
    justify-content: flex-end;
  }
  .cus_box {
    font-weight: 700;
    color: #000000;
    font-size: 24rpx;
  }
  .tips_box {
    display: flex;
  }
  .time {
    display: flex;
    align-items: baseline;
    font-size: 22rpx;
    margin-top: 12rpx;
    .time_detail {
      margin-left: 10rpx;
    }
  }
  .server_box {
    display: flex;
    align-items: baseline;
    font-size: 22rpx;
    margin-top: 12rpx;
    .u-icon {
      margin-right: 10rpx;
    }
    .server_name {
      margin-left: 10rpx;
      margin-right: 10rpx;
    }
    .server_gropup {
      margin-left: 10rpx;
    }
  }
}
.drop {
  position: relative;
  width: 750rpx;
  ::v-deep .uv-text__value {
    font-size: 22rpx !important;
  }
}
.tabs {
  display: flex;
  justify-content: center;
  margin-top: 0rpx;
  margin-bottom: 40rpx;
}
.tag_box {
  margin-top: 32rpx;
  .follow_tag {
    padding: 2rpx 42rpx;
    background: #fe8b00;
    border-radius: 100rpx 100rpx 100rpx 4rpx;
    color: #ffffff;
    font-size: 20rpx;
    margin-right: 24rpx;
  }
}
.tips {
  padding: 2rpx 18rpx;
  font-size: 16rpx;
  margin-right: 5rpx;
  margin-top: 8rpx;
  display: inline-block;
}
.s {
  color: #a22c26;
  border: 1rpx solid #a22c26;
  background-color: #fbe6e8;
}
.a {
  color: #fe8b00;
  border: 1rpx solid #fe8b00;
  background-color: #fff9eb;
}
.b {
  color: #52c41a;
  border: 1rpx solid #52c41a;
  background-color: #f6ffed;
}
.c {
  color: #1677ff;
  border: 1rpx solid #1677ff;
  background-color: #e6f4ff;
}
.d {
  color: #b088fa;
  border: 1rpx solid #b088fa;
  background-color: #f0e8ff;
}
.hasLink {
  color: #005ed2;
  background-color: #eff4fa;
}
.red_tag {
  color: #a22c26;
  background-color: #fbe6e8;
}
</style>